<template>
  <div>
     <van-search
      v-model="searchValue"
      @search="onSearch"
      show-action
      >
      <div slot="action" @click="onSearch">搜索</div>
      <div class="search-content" v-show="hasNoSearch">
        <ul>
          <li class="search-item" v-for="item of list" :key="item.id">
            {{item.name}}
          </li>
        </ul>
      </div>
    </van-search>
  </div>
  
</template>
<script>
  import { Search } from 'vant';
  export default {
  name:'Header',
  props: {
    pageTitle:String,
    searchValue:String,
  } , 
  components: {
    [Search.name]:Search,
  },
  data() {
    return {
      // searchValue:'',
      timer: null,
      list: [],
    }
  },
  methods:{
    onSearch(){

    },
  },
  computed :{
    hasNoSearch() {
      return !this.list.length;
    }
  },
  watch: {
    searchValueChange() {
      if(this.timer){
        clearTimeout(this.timer)
      }
      if(!this.searchValue){
        this.list = [];
        return
      }
      // this.timer = setTimeout(() => {
      //   const result = [];
      //   for (let i in this.cities) {
      //     this.cities[i].forEach((value) => {
      //       if(value.spell.indexOf(this.searchValue) > -1 ||
      //        value.name.indexOf(this.searchValue) > -1) {
      //          result.push(value)
      //       }
      //     });
      //   }
      //   this.list = result
      // },100)
    }
  }
}
</script>
<style lang="less" scoped>
 .search-content {
   z-index: 1111;
   overflow: hidden;
   position: absolute;
   left: 0;
   top: 44px;
   border: 1px solid red;
   height: 100px;

 }
</style>